import React from "react";
import {
  withRouter
} from "react-router-dom";
import { Tag, Divider } from 'antd';
import staffCss from './staff.module.css'

class History extends React.Component {
  state = {
    data: {},
    totalTime: '',
    applyId: '',
    qrCode: [],
    userDtos: []

  }
  componentDidMount () {
    
    this.getQrcode()
  }
  //获取二维码
  getQrcode = () => {
    if (this.props.location.state) {
      this.setState({ data: this.props.location.state.detail })
      const applyId = this.props.location.state.detail.applyId
      this.$axios({
        method: 'post',
        url: `/wx/portal/applyDetail?applyId=${applyId}`,
      }).then(res => {
        console.log(res, '详情数据')
        this.setState({ qrCode: res.data.data.voucherDtos, userDtos: res.data.data.userDtos })
        console.log(this.state.qrCode, res, '二维码')
      }).catch(function (error) {
        console.log(error);
      })
    }else{
      const applyId = this.props.location.search.slice((this.props.location.search.indexOf("=") + 1))
      this.$axios({
        method: 'post',
        url: `/wx/portal/applyDetail?applyId=${applyId}`,
      }).then(res => {
        console.log(res, '详情数据')
        this.setState({ qrCode: res.data.data.voucherDtos, userDtos: res.data.data.userDtos,data:res.data.data })
        console.log(this.state.qrCode, res, '二维码')
      }).catch(function (error) {
        console.log(error);
      })
    }
  }

  goback = () => {
    this.props.history.goBack()
  }

  render () {


    const { qrCode, userDtos, data } = this.state
    return (

      <div className={staffCss.detail}>
        <div onClick={this.goback}>
          <svg t="1627520711747" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1947" width="30" height="30"><path d="M675.328 117.717333A425.429333 425.429333 0 0 0 512 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667c0-56.746667-11.093333-112-32.384-163.328a21.333333 21.333333 0 0 0-39.402667 16.341333A382.762667 382.762667 0 0 1 896 512c0 212.074667-171.925333 384-384 384S128 724.074667 128 512 299.925333 128 512 128c51.114667 0 100.8 9.984 146.986667 29.12a21.333333 21.333333 0 0 0 16.341333-39.402667z m-324.693333 373.013334l174.464-174.485334a21.141333 21.141333 0 0 0-0.192-29.973333 21.141333 21.141333 0 0 0-29.973334-0.192l-208.256 208.256a20.821333 20.821333 0 0 0-6.122666 14.976c0.042667 5.418667 2.133333 10.837333 6.314666 14.997333l211.178667 211.2a21.141333 21.141333 0 0 0 29.973333 0.213334 21.141333 21.141333 0 0 0-0.213333-29.973334l-172.629333-172.629333 374.997333 2.602667a20.693333 20.693333 0 0 0 21.034667-21.034667 21.482667 21.482667 0 0 0-21.333334-21.333333l-379.242666-2.624z" fill="#3D3D3D" p-id="1948"></path></svg>
        </div>
        <div>
          <div style={{ fontWeight: 'bold', textAlign: "center" }} >申请详情</div>
          {Object.keys(data).length !== 0 ?
            <div>
              <div className={staffCss.spacebetween}>申请人:<div>{data.userName}</div></div>
              <div className={staffCss.spacebetween}>申请人工号:<div>{data.userId}</div></div>
              <div className={staffCss.spacebetween} >申请编号:<div>{data.applyId}</div></div>
              <div className={staffCss.spacebetween}>场地数量:<div>{data.siteNum}</div></div>
              <div className={staffCss.spacebetween}>时长:<div>{data.duration}小时</div></div>
              <div className={staffCss.spacebetween}>打球日期:<div>{data.playDate.slice(0, 11)}</div></div>
              <div className={staffCss.spacebetween}>状态:<div>{data.approval === "1" ? "审核通过" : "审核中"}</div></div>
              <div className={staffCss.spacebetween}>申请成员:<div>{userDtos.length}人</div></div>
              <div >
                {userDtos.map((i) => {
                  return (
                    <Tag color="gold" style={{ marginTop: 5 }}>{i.userName}({i.userId})</Tag>
                  )
                })}
              </div>
              <div >备注:<div>{data.remark}</div></div>
            </div> : ''
          }
        </div>
        <Divider orientation="center"></Divider>
        <div className={staffCss.brCode}>
          <div style={{ fontWeight: 'bold' }}>二维码</div>
          <div className={staffCss.brCodeContainer}>
            <div className={staffCss.each}>
              {qrCode.map(i => {
                return (<div >
                  <img src={i.qrCodeUrl} alt="二维码" width={300} />
                  <div style={{ color: "lightseagreen", fontSize: 15, fontWeight: "bold" }}>券ID:{i.voucherId}</div>
                  <div style={{ color: "lightseagreen", fontSize: 15, fontWeight: "bold" }} >券号:{i.voucherNumber}</div>
                </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>

    );
  }
}



export default withRouter(History)

